<template>
  <div
    class="home-cms-pages cms-views-container"
    :class="type === 6 ? 'h-full' : type === 7 || type === 8 ? 'h-[921px] overflow-hidden' : ' h-[1900px]'"
  >
    <!-- 分类标签 -->
    <CmsHeaderTabbar
      @click="handleClick('tabBar')"
      :class="{ 'component-selected': select === 'tabBar' }"
      :type="type"
      :selectText="{ color: '#000000', fontSize: '20px', borderColor: '#000', fontWeight: 500 }"
      :text="{ color: '#48494D', fontSize: '14px' }"
      :headerStyle="{ backgroundColor: 'white' }"
    />
    <!-- 顶部搜索栏 -->
    <CmsSearchBar :type="2" @click="handleClick('titleBar')" :class="{ 'component-selected': select === 'titleBar' }" />

    <!-- 公告栏 -->
    <CmsNoticeBar
      :type="1"
      @click="handleClick('noticeBar')"
      :class="{ 'component-selected': select === 'noticeBar' }"
    />
    <!-- 轮播图 -->
    <CmsRotationView :type="1" />
    <!-- 小说图集区域 -->
    <CmsAtlasArea />

    <CmsGridView
      :type="1"
      :title="type === 4 ? '高分视频' : ''"
      :moreShow="type === 4"
      @click="handleClick('latestVideo')"
      :class="{ 'component-selected': select === 'latestVideo' }"
      v-if="type !== 6"
    />
    <div
      @click="handleClick('moreVideoList')"
      :class="{ 'component-selected': select === 'moreVideoList' }"
      v-if="type !== 6"
    >
      <CmsCardView :type="2" v-for="i in 3" :key="i" />
    </div>
    <!-- 影人列表 -->
    <ShadowmanView v-else :select="select" @select="handleClick" />

    <CmsBottomBar active="home" />
  </div>
</template>

<script setup lang="ts">
import ShadowmanView from '../components/shadow-man'
import CmsComponents from '@cms/components'
import { withDefaults, ref } from 'vue'
import type { ComponentKeys } from '@cms/h5-editor'

const {
  CmsSearchBar,
  CmsRotationView,
  CmsGridView,
  CmsCardView,
  CmsNoticeBar,
  CmsHeaderTabbar,
  CmsAtlasArea,
  CmsBottomBar
} = CmsComponents
withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.home-cms-pages {
  overflow-y: hidden;
  .home-recommend {
    @apply text-white;
  }
  .home-default {
    @apply text-[#48494d];
  }
  .public-box {
    @apply absolute;
    left: 50%;
    top: 31%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
